<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>导航菜单</title>
    <meta charset="utf-8"/>
    <link rel="stylesheet" th:href="@{/js/easyui/icon.css}"/>
    <link rel="stylesheet" th:href="@{/js/bootstrap/dist/css/bootstrap.css}">
    <link rel="stylesheet" th:href="@{/js/jquery.confirm/jquery-confirm.min.css}"/>
    <link rel="stylesheet" th:href="@{/js/easyui/bootstrap/easyui.css}"/>
    <style>
        .label{
            cursor: pointer;
        }
    </style>
</head>
<body style="padding: 10px;overflow: hidden">
<div class="row">
    <div class="col-md-12">
        <div class="panel panel-default">
            <div class="panel-heading">
                <div class="row">
                    <div class="col-lg-4">
                        <button type="button" class="btn btn-success" id="toAddMenu" shiro:hasAnyRoles="superAdmin">
                            新增菜单
                        </button>
                        <!--<button type="button" class="btn btn-danger"  :hasPermission="'/navigation/add'">-->
                            <!--权限测试（新增菜单）-->
                        <!--</button>-->
                    </div>
                </div>
            </div>
            <div class="panel-body">
                <table class="table hover" id="dataTable">
                </table>
            </div>
        </div>

    </div>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">新增菜单</h4>
            </div>
            <div class="modal-body">

                <form class="form-horizontal" role="form" id="addForm">
                    <input type="hidden" name="type" value="MENU" id="addMenuForm"/>
                    <div class="form-group">
                        <label  class="col-sm-2 control-label">菜单名称
                        <span class="text-danger">*</span>
                        </label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" placeholder="菜单名称" name="functionName">
                        </div>
                    </div>
                    <div class="form-group">
                        <label  class="col-sm-2 control-label">父级菜单</label>
                        <div class="col-sm-10">
                            <select class="form-control" name="parentId" id="addParentId">
                                <option value="">无</option>
                                <option th:each="menu:${firstLevel}" th:text="${menu.functionName}" th:value="${menu.id}">1</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label  class="col-sm-2 control-label">url</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" placeholder="菜单请求连接" name="url">
                        </div>
                    </div>
                    <div class="form-group">
                        <label  class="col-sm-2 control-label">icon</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" placeholder="icon" name="icon">
                        </div>
                    </div>
                    <div class="form-group">
                        <label  class="col-sm-2 control-label">排序</label>
                        <div class="col-sm-10">
                            <input type="number" class="form-control" placeholder="排序" name="sort">
                        </div>
                    </div>
                    <div class="form-group">
                        <label  class="col-sm-2 control-label">备注</label>
                        <div class="col-sm-10">
                            <textarea class="form-control" placeholder="备注" name="comment"></textarea>
                        </div>
                    </div>

                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="addMenu">确定</button>
            </div>
        </div>
    </div>
</div>
<!-- Modal -->
<div class="modal fade" id="addLinkModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" >新增功能</h4>
            </div>
            <div class="modal-body">

                <form class="form-horizontal" role="form" id="linkForm">
                    <input name="parentId" type="hidden" id="linkParentId"/>
                    <input name="type" type="hidden" id="linkType" value="LINK"/>
                    <div class="form-group">
                        <label  class="col-sm-2 control-label">所属菜单</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" placeholder="名称" id="menuFunctionName" disabled>
                        </div>
                    </div>
                    <div class="form-group">
                        <label  class="col-sm-2 control-label">功能名称  <span class="text-danger">*</span></label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" placeholder="功能名称" name="functionName">
                        </div>
                    </div>
                    <div class="form-group">
                        <label  class="col-sm-2 control-label">地址</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" placeholder="地址" name="url">
                        </div>
                    </div>
                    <div class="form-group">
                        <label  class="col-sm-2 control-label">说明</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" placeholder="说明" name="comment">
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="addLink">确定</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel2">修改角色</h4>
            </div>
            <div class="modal-body">

                <form class="form-horizontal" role="form" id="editForm">
                    <input name="id" type="hidden"/>
                    <div class="form-group">
                        <label  class="col-sm-2 control-label">名称</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" placeholder="名称" name="functionName">
                        </div>
                    </div>
                    <div class="form-group">
                        <label  class="col-sm-2 control-label">地址</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" placeholder="地址" name="url">
                        </div>
                    </div>
                    <div class="form-group">
                        <label  class="col-sm-2 control-label">排序</label>
                        <div class="col-sm-10">
                            <input type="number" class="form-control" placeholder="排序" name="sort">
                        </div>
                    </div>
                    <div class="form-group">
                        <label  class="col-sm-2 control-label">icon</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" placeholder="icon" name="icon">
                        </div>
                    </div>
                    <div class="form-group">
                        <label  class="col-sm-2 control-label">说明</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" placeholder="说明" name="comment">
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="updateMenu">确定</button>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript" th:attr="src=@{/js/jquery.js}"></script>
<script type="text/javascript" th:attr="src=@{/js/easyui/jquery.easyui.min.js}"></script>
<script type="text/javascript" th:attr="src=@{/js/bootstrap/dist/js/bootstrap.min.js}"></script>
<script type="text/javascript" th:attr="src=@{/js/jquery.confirm/jquery-confirm.min.js}"></script>
<script type="text/javascript" th:attr="src=@{/js/jquery.validate.js}"></script>
<script type="text/javascript" th:attr="src=@{/js/navigation.js}"></script>
</body>
</html>
